<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-position="left"
      label-width="150px"
      :disabled="viewMode === 'view'"
    >
      <el-form-item label="部件名称" prop="component_name">
        <el-input
          v-model="formData.component_name"
          placeholder="请输入部件名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="部件类型" prop="component_type">
        <el-input
          v-model="formData.component_type"
          placeholder="请输入部件类型"
        ></el-input>
      </el-form-item>
      <el-form-item label="部件编码" prop="component_code">
        <el-input
          v-model="formData.component_code"
          placeholder="请输入部件编码"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属分类" prop="component_category">
        <el-input
          v-model="formData.component_category"
          placeholder="请输入所属分类"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格型号" prop="specification_model">
        <el-input
          v-model="formData.specification_model"
          placeholder="请输入规格型号"
        ></el-input>
      </el-form-item>
      <el-form-item label="技术规格" prop="specifications">
        <el-input
          v-model="formData.specifications"
          placeholder="请输入技术规格"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="formData.description"
          placeholder="请输入描述"
        ></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary" v-if="viewMode !== 'view'" @click="submitForm">
        提交
      </el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script>
import ComponentService from "@/api/component";

export default {
  name: "MyDialog",
  data() {
    return {
      viewMode: "",
      dialogVisible: true, // 初始时对话框可见
      dialogTitle: "添加部件", // 对话框标题
      // 表单数据
      formData: {},
      // 校验规则
      rules: {},
    };
  },
  methods: {
    // 初始化添加根部件
    initAddComponent() {
      console.log("initAddComponent");
      this.viewMode = "add";
      this.dialogTitle = "添加部件";
    },
    // 初始化查看部件
    initViewComponent(row) {
      this.viewMode = "view";
      this.dialogTitle = "查看部件";
      this.formData = {
        ...row,
      };
    },
    // 初始化修改部件
    initModifyComponent(row) {
      console.log("initModifyComponent", row);
      this.viewMode = "modify";
      this.dialogTitle = "编辑部件";
      this.formData = {
        ...row,
      };
    },
    /**
     * 获取部件树
     */
    getComponentTree() {
      ComponentService.getComponentTree().then(async (res) => {
        let data = await res.json();
        if (data.code === 200) {
          this.componentOptions = data.result;
        }
      });
    },
    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单数据
          console.log(this.formData);
          if (this.viewMode === "add") {
            this.submitForAdd();
          } else if (this.viewMode === "modify") {
            this.submitForModify();
          }
        } else {
          console.log("校验失败");
        }
      });
    },
    /**
     * 添加根分类和子分类
     */
    submitForAdd() {
      ComponentService.createComponent(this.formData).then(async (res) => {
        let data = await res.json();
        if (data.code === 200) {
          this.$notify.success({
            title: "操作成功",
            message: "添加成功",
          });
          this.onCloseAndRefresh();
        } else {
          this.$notify.error({
            title: "操作失败",
            message: data.message,
          });
        }
      });
    },
    /**
     * @description 提交修改
     */
    submitForModify() {
      ComponentService.updateComponent(this.formData).then(async (res) => {
        let data = await res.json();
        if (data.code === 200) {
          this.$notify.success({
            title: "操作成功",
            message: "编辑成功",
          });
          this.onCloseAndRefresh();
        } else {
          this.$notify.error({
            title: "操作失败",
            message: data.message,
          });
        }
      });
    },
    // 关闭对话框并刷新数据
    onCloseAndRefresh() {
      this.$emit("close", true);
    },
    // 关闭对话框
    closeDialog() {
      this.$emit("close", false);
    },
  },
};
</script>
